import axios from 'axios'
import React from 'react'
import PubSub from 'pubsub-js'
import {useLocation} from 'react-router-dom' 
import {CaretRightOutlined,PlusOutlined } from '@ant-design/icons'
import { Col, Row } from 'antd';

import './index.css'
import store from '../../redux/store'

export default function SongList() {
const [songList,setSongList] =React.useState([])
const {state:{dissid,lists}}=useLocation()
React.useEffect(()=>{
  if(dissid){
    let url=`http://localhost:3000/getSongListDetail?disstid=${dissid}`
    axios.get(url).then(
      res=>{
        // console.log(res.data.response.cdlist[0])
         setSongList(res.data.response.cdlist[0].songlist)
      }
    )
  }
 
  if(lists){
    setSongList(lists)
  }
  return ()=>{
    
  }
},[dissid, lists]) 
const a=songList.map((l)=>{
  return(  <li className='songlistitem' key={l.mid?l.mid:l.songmid} >
    <Row>
  <Col span={18}>
    <Row>
      <Col span={12}>{l.name?l.name:l.songname}</Col>
      <Col>{l.singer[0].name}</Col>
    </Row>
  </Col>
  <Col span={4}>
  <CaretRightOutlined  onClick={()=>{
    PubSub.publish('getPlayUrl',{mid:l.mid?l.mid:l.songmid,name:l.name?l.name:l.songname})//消息发布给player组件
  }}/>
  |
  <PlusOutlined 
    onClick={()=>{
      store.dispatch({type:"add",data:{mid:l.mid?l.mid:l.songmid,name:l.name?l.name:l.songname}}) //添加到播放列表
    }}
  />
  </Col>
</Row>
</li>)
})
 
  return (
    <div className='songlist'>{a}</div>
  )
}
